<template>
    <div class="content">
        <div class="package-list">
            <div class="package-item" v-for="item in packageList" :key="item.id">
                <package-item showBuy :item="item" :studyhallId="id" />
            </div>
        </div>
        <div class="empty" v-if="empty">
            <img class="image" src="@/static/images/common/empty.png" />
            <p class="name">暂无住宿包推荐</p>
        </div>
        <u-loadmore
            v-if="packageList.length > 0"
            loadmoreText="找自习 来上岸"
            fontSize="24rpx"
            color="#D5D5D5"
            lineColor="#D5D5D5"
            marginTop="20"
            line
        />
    </div>
</template>

<script>
import PackageItem from '@/components/PackageItem';
export default {
    name: 'package',
    components: {
        PackageItem,
    },
    data() {
        return {
            id: null,
            empty: false,
            packageList: [],
        };
    },
    onLoad(options) {
        if (options.id) {
            this.id = Number(options.id);
            this.getPackageList();
        }
    },
    methods: {
        getPackageList() {
            this.$Api.study.package
                .list({
                    studyhallId: this.id,
                })
                .then(res => {
                    this.packageList = res;
                    if (res.length === 0) {
                        this.empty = true;
                    }
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    padding: 20rpx 30rpx;
    .package-list {
        .package-item {
            margin-bottom: 20rpx;
        }
    }
}
</style>
